<template>
  <div class="leaderSpeak">
    <el-form ref="form" :model="mottoForm" label-width="120px">
      <el-form-item label="领导姓名：">
        <el-input v-model="mottoForm.teachername" size="small"></el-input>
      </el-form-item>
      <el-form-item label="照片：" prop="region" class="mgTop imgSize">
        <img class="imgSize" :src="mottoForm.picture">
      </el-form-item>
      <el-form-item label="更新照片：" class="mgTop">
        <el-upload
            class="upload-demo"
            action="http://39.106.171.39:8011/mbl/FileController/uploadFile"
            ref="mottoUpload"
            :on-change="handleFileChange"
            :file-list="mottoFileList"
            :auto-upload="false">
          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload" :loading="fileLoading">上传到服务器</el-button>
          <!--          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->
        </el-upload>
      </el-form-item>
      <el-form-item label="格言：" class="mgTop">
        <el-input type="textarea" v-model="mottoForm.motto" :rows="8"></el-input>
      </el-form-item>
      <el-form-item label="是否可见：" class="mgTop">
        <el-radio-group v-model="mottoForm.flag">
          <el-radio :label="'1'" selected>否</el-radio>
          <el-radio :label="'0'">是</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item class="mgTop">
        <el-button type="primary" @click="onSubmit" :loading="loading">提交</el-button>
<!--        <el-button>取消</el-button>-->
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import { uploadFile, updateIndexMotto, getIndexMottoList } from '@/api/eventManage'
  export default {
    data() {
      return {
        loading: false,
        fileLoading: false,
        mottoFileList: [],
        mottoForm: {
          id: '1',
          teachername: '',
          motto: '',
          picture: '',
          flag: '0'
        }
      }
    },
    created() {
      //
      this.getIndexInfo()
    },
    methods: {
      async getIndexInfo(){
        const res = await getIndexMottoList()
        let info = res.rows[0]
        Object.assign(this.mottoForm, info)
      },
      async onSubmit(){
        this.loading = true
        await updateIndexMotto(this.mottoForm)
        this.loading = false
        this.$message({
          type: 'success',
          message: '更新成功'
        })
      },
      handleFileChange(file, FileList){
        this.mottoFileList = FileList
      },
      async submitUpload(){
        let formData = new FormData()
        formData.append('file', this.mottoFileList[0].raw)
        // this.newsFileList.forEach(function (file) {
        //   formData.append("file", file.raw, file.name);
        // })
        this.fileLoading = true
        const res = await uploadFile(formData)
        this.mottoForm.picture = res.message
        this.fileLoading = false
      }
    },
    computed: {},
    components: {}
  }
</script>

<style lang="scss" scoped>
  .leaderSpeak{
    width: 55%;
    .mgTop{
      margin-top: 20px;
    }
    .imgSize{
      width: 70px;
      height: 70px;
    }
  }

</style>
